<template>
	<view class=" page myde">
		<view class="header">
			<image mode="aspectFill"
				style="width: 100%;height: 100%;"
				:src="xcxImgUrl && xcxImgUrl+'myde/bj.svg'"></image>
		</view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>

		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>

		<!-- 导航栏 -->
		<navBar>
			<text :slot="'left'">我的</text>
		</navBar>

		<!-- 个人资料 :style="{'padding-top': top}"-->
		<view class="personalData pd10">
			<!-- 上面个人信息 -->
			<view class="personalData_top">
				<view class="personalData_top_image mr10">
					<image :src="visitorLoginInfo.headUrl ? visitorLoginInfo.headUrl : xcxImgUrl && xcxImgUrl+'myde/touxiang.svg'"
						style="width:100%;height: 100%;border-radius: 50%;"
						mode="aspectFill"></image>
				</view>
				<view class="personalData_top_name" v-if="!(visitorLoginInfo.name&&visitorLoginInfo.phone)" @click="bindingPhoneNumberShow = true" >
					<view class="textOneShow personalData_top_name_top">
						注册/登录
					</view>
					<view class="personalData_top_name_phone mt10">
						hi！快来注册体验吧！
					</view>
				</view>
				<view class="personalData_top_name" v-else>
					<view class="textOneShow personalData_top_name_top">
						{{visitorLoginInfo.name }}
					</view>
					<view class="personalData_top_name_phone mt10">
						{{visitorLoginInfo.phone}}
					</view>
				</view>
				<view class="personalData_top_shezhi"
					@click="toSetting">
					<image :src="xcxImgUrl && xcxImgUrl+'myde/shezhi.svg'"
						style="width:100%;height: 100%;"
						mode="aspectFill"></image>
				</view>
			</view>
			<!-- 收藏 -->
			<view class="user_btn">
				<view @click="toUsePage(item)"
					v-for="(item,index) of useList"
					:key="index">
					<view class="userList">
						<image style="width:60rpx;height: 60rpx;"
							mode="aspectFill"
							:src="item.src"></image>
						<text class="mt10"> {{item.title}} </text>
					</view>
			
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="myOrder">
				<view class="myOrder_top">
					<text class="myOrder_top_left">商城订单</text>
					<text @click="toAllOrder(0)"
						class="myOrder_top_right">查看全部订单</text> 
						<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 下面选项 -->
				<view class="myOrder_btn">
					<view class="myOrderList"
						@click="toAllOrder(item)"
						v-for="(item,index) of myOrderList"
						:key="index">
						<view class="badges"
							style="position: relative;">
							<u-badge :value="item.count"
								:max="99"></u-badge>
							<image style="width:60rpx;height: 60rpx;"
								mode="aspectFill"
								:src="xcxImgUrl && xcxImgUrl+item.src"></image>
						</view>
						<text class="mt10"> {{item.title}} </text>

					</view>
				</view>

			</view>
		</view>

		<!-- 主体内容 -->
		<view class="main_myde pd10"
			:style="{'height': 'calc(100vh - '+ top +')'}">

			<!-- 服务 -->
			<view class="serve mt10">
				<view class="serve_top">
					<text class="serve_top_left">我的服务</text>
				</view>
				<!-- 下面选项 -->
				<view class="serve_btn pd10">
					<view @click="toPage(item)"
						v-for="(item,index) of serveList"
						:key="index">
						<view class="serveList">
							<image style="width:60rpx;height: 60rpx;"
								mode="aspectFill"
								:src="item.title == '领劵中心' ?  item.src : xcxImgUrl && xcxImgUrl+item.src "></image>
							<text class="mt10"> {{item.title}} </text>
						</view>

					</view>
				</view>


			</view>


		</view>

		<!-- 电话弹窗 -->
		<u-popup :show="phoneModelShow"
			round='30'
			class="phone_x"
			mode="center">
			<view class="phonePopup">
				<view class="phonePopup_top">
					<image mode="aspectFill"
						:src="xcxImgUrl && xcxImgUrl+'myde/phoneBg.svg'"></image>
				</view>
				<image class="touxiang"
					:src="xcxImgUrl && xcxImgUrl+'myde/phoneTouxiang.svg'"></image>
				<view class="phonePopup_bom">
					<view class="phonePopup_bom_title">如有问题请拨打客服热线</view>
					<view class="phonePopup_bom_phone">
						{{computedPhone}}
					</view>
				</view>

				<view @click="call"
					class="">
					<newBtn bgColor="#EC4141"
						color="#FFF"
						name="立即拨打"></newBtn>
				</view>

				<view @click="phoneModelShow = false"
					class="mtb10">
					<newBtn bgColor="#F2F2F2"
						color="#333"
						name="取消"></newBtn>
				</view>
			</view>
		</u-popup>

		<!-- 邀请码 -->
		<u-popup mode="bottom"
			:round="20"
			:show="invitationCodeShow"
			@close="invitationCodeShow = false"
			:closeable="true">
			<view class="invitationCode">
				<invitationCode></invitationCode>
			</view>
		</u-popup>
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow'
			@close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave'
			v-if="bindingPhoneNumberShow"></bindingPhoneNumber>
	</view>
</template>

<script>
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import {
		listMallMemberSonPageInfo,
		getCurrentMallMember,
		getCatCount,
		orderAreaCount as orderAreaCountApi
	} from '@/api/global.js'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import invitationCode from '@/components/invitationCode/invitationCode.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回客服电话 直接绑定在小程序中不显示
			computedPhone() {
				return this.$store.state.configSetting.serviceTelInfo.phone
			}
		},
		components: {
			newBtn,
			invitationCode
		},
		data() {
			return {
				buttonIsShow:'',
				bindingPhoneNumberShow: false,
				loginStatus: 1, //登录状态
				statusBarHeight: '', //状态栏的高度
				hieght: '', //站位的高度
				myOrderList: [ //我的订单选项
					{
						title: '待付款',
						src: 'myde/daifukuan.svg'
					},
					{
						title: '待审核',
						src: 'myde/daishenhe.svg'
					},
					{
						title: '待发货',
						src: 'myde/daifahuo.svg'
					},
					{
						title: '待收货',
						src: 'myde/daishouhuo.svg'
					},
					{
						title: '退货/售后',
						src: 'myde/shouhou.svg'
					}
				],
				serveList: [ //我的服务
					{
						title: '收货地址',
						src: 'myde/shouhuodizhi.svg'
					},
					{
						title: '邀请朋友',
						src: 'myde/yaoqingpengyou.svg'
					},
					
					{
						title: '待确认订单',
						src: 'myde/daiquerendingdan.svg'
					},
					{
						title: '子账号管理',
						src: 'myde/zizhanghao.svg'
					},
					{
						title: '往来对账',
						src: 'myde/wanglaiduizhang.svg'
					},
					{
						title: '领劵中心',
						src: '/static/newpic/couponCenter.svg'
					},
					{
						title: '客服电话',
						src: 'myde/kefudianhua.svg'
					},
				],
				useList: [ //我的
					{
						title: '我的收藏',
						src: '/static/newpic/mycollect.svg'
					},
					{
						title: '我的卡卷',
						src: '/static/newpic/mycoupon.svg'
					},
					{
						title: '浏览记录',
						src: '/static/newpic/myHistroy.svg'
					}
					
				],
				top: '', //滚动元素距离顶部的距离
				visitorLoginInfo: {}, //用户信息
				phoneModelShow: false, //电话弹窗
				invitationCodeShow: false, //邀请码弹窗
			};
		},
		// onTabItemTap: function(item) {
		// 	console.log(item)
		// 	if(item.pagePath == "pages/myde/myde"){
		// 		uni.showModal({
		// 			title: '提示',
		// 			content: '这是一个模态弹窗',
		// 			success: function (res) {
		// 				if (res.confirm) {
		// 					console.log('用户点击确定');
		// 					uni.navigateTo({
		// 						url:'/pages/login/login'
		// 					})
		// 				} else if (res.cancel) {
		// 					console.log('用户点击取消');
		// 				}
		// 			}
		// 		});

		// 	}
		// },

		mounted() {

			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				let info = uni.createSelectorQuery().in(this).select('.main_myde');
				info.boundingClientRect((data) => { //data - 各种参数
					// #ifdef MP-WEIXIN
					this.top = (data.top + this.$store.state.statusBarHeight + this.$store.state
						.navBarHeight + 10) + 'px'
					// #endif
					// #ifdef H5
					this.top = (data.top + this.$store.state.navBarHeight) + 'px'
					// #endif
					// #ifdef APP-PLUS
					this.top = (data.top + this.$store.state.navBarHeight + this.$store.state
						.statusBarHeight) + 'px'
					// #endif
					console.log(data, 'vuex') // 获取元素宽度
				}).exec()
			})
		},
		onLoad() {
			//加载配置 是否显示客服电话 2 不显示
			if (this.$store.state.configSetting.serviceTelInfo.parameter == 2) {
				this.serveList.splice(this.serveList.findIndex(it => it.title == '客服电话'), 1)
			}
			this.orderAreaCount();
		},
		async onShow() {
			this.orderAreaCount();
			this.getUserInfo();
			this.getCatToally()
			let res = await getCurrentMallMember()
			console.log(res);
			if (res.data?.info?.status == 1)
								// return
			this.bindingPhoneNumberShow = true
	
		},
		methods: {
		// 获取购物车数量
				async getCatToally(){
					const {data} = await getCatCount({
						type:1
					})
				    if(data.info > 0 ) {
						uni.setTabBarBadge({
						  index: 2,
						  text: data.info.toString() 
						})
					}else {
						uni.removeTabBarBadge({
						  index: 2
						})
					}
					
					
				},
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			   uni.switchTab({
			   	url:'/pages/home/home'
			   })
			},
			//手机号弹窗框确认
			bindingPhoneNumberSave() {
				//关闭弹窗
				this.bindingPhoneNumberShow = false
				this.getUserInfo()
			},
			async orderAreaCount() {
				let res = await orderAreaCountApi({});
				if (res.code == 2000) {
					res.data.info.forEach((v, i) => {
						// this.myOrderList[i]['count'] = v;
						this.$set(this.myOrderList[i], 'count', v)
					})
					console.log(this.myOrderList);
				} else {
					this.Utils.toast(`${res.msg}`);
				}
			},
			//点击拨打电话
			call() {
				this.phoneModelShow = false
				this.Utils.call(this.$store.state.configSetting.serviceTelInfo.phone)
			},
			//获取用户信息
			async getUserInfo() {
				let res = await getCurrentMallMember()
				if (res.code == 2000) {
					this.visitorLoginInfo = res.data.info
					console.log(res);
					this.buttonIsShow =  res?.data?.info?.parentId > 0 ? false : true
				}
			},
			//去设置
			toSetting() {
				uni.navigateTo({
					url: '/page_setting/settingHome'
				})
			},
			//去订单
			toAllOrder(item) {
				console.log(item);

				//如果点击的是退货售后
				if (item.title == '退货/售后') {
					uni.navigateTo({
						url: '/page_public/refundOrder'
					})
				} else {

					let statusInfo = {
						payStatus: '',
						status: ''
					}
					//点击查看全部订单
					if (item == 0) {
						statusInfo.status = 0
					} else if (item.title == '待付款') {
						statusInfo.status = 3
						statusInfo.payStatus = 1
					} else if (item.title == '待审核') {
						statusInfo.status = 1
					} else if (item.title == '待发货') {
						statusInfo.status = 3
					} else if (item.title == '待收货') {
						statusInfo.status = 4
					}
					uni.navigateTo({
						url: `/page_public/allOrder?type=my&statusInfo=${JSON.stringify(statusInfo)}`
					})

				}
			},
			//去服务选项
			toPage(item) {
				console.log(item);
				if (item.title == '我的收藏') {
					uni.navigateTo({
						url: '/page_public/myCollect'
					})
				} else if (item.title == '待确认订单') {
					uni.navigateTo({
						url: '/page_public/tbcOrder'
					})
				} else if (item.title == '子账号管理') {
					if(!this.buttonIsShow){
						this.Utils.toast(`该账号是子账户无法进行子账号管理`)
						return
					}
					uni.navigateTo({
						url: '/page_public/sendAccountNumber'
					})
				} else if (item.title == '客服电话') {
					this.phoneModelShow = true
				} else if (item.title == '收货地址') {
					uni.navigateTo({
						url: '/page_setting/harvestAddress?type=myde'
					})
				} else if (item.title == '邀请朋友') {
					this.invitationCodeShow = true
				} else if (item.title == '往来对账') {
					uni.navigateTo({
						url: '/page_public/currentAccount'
					})
				}else if (item.title == '领劵中心') {
					uni.navigateTo({
						url: '/page_coupon/couponCenter'
					})
				}
			},
			// 去我的功能选项
			toUsePage(item){
				if (item.title == '我的收藏') {
					uni.navigateTo({
						url: '/page_public/myCollect'
					})
				} else if(item.title == '我的卡卷'){
					console.log(11111);
					uni.navigateTo({
						url: '/page_coupon/myCoupon'
					})
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/ .u-popup__content__close{
	top: 22rpx;
	 height: 36rpx;
	 width: 36rpx;
	 line-height: 80rpx;
	 border: rgb(144, 147, 153) 1px solid;
	border-radius: 50%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	}
	/deep/.bindingPhoneNumber_title{
		margin-top:28rpx !important;
	}
	.badges /deep/.u-badge {
		position: absolute;
		right: 0;
		top: -10rpx;
	}
   /deep/.u-popup__content__close.u-popup__content__close--top-right {
	   top:42rpx 
   }
   /deep/.main_phoneNumber_form {
	   margin-left: 26rpx !important;
	   margin-right: 18rpx !important;
   }
   /deep/.out {
	   padding: 28rpx !important;
   }
	.phone_x /deep/.u-popup__content {
		overflow: hidden !important;
	}

	.myde {
		background-color: $bg_color;
	}

	.header {
		width: 100%;
		height: 442rpx;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		// z-index: -1;
	}


	.ztl {
		width: 100%;
	}

	.personalData {
		width: 100%;
		// height: 340rpx;
		height: 500rpx;
		box-sizing: border-box;
		border-radius: 0 0 20rpx 20rpx;
		z-index: 1;
		position: relative;

		.personalData_top {
			height: 50%;
			display: flex;
			align-items: center;
			z-index: 1;

			.personalData_top_image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				z-index: 1;
			}

			.personalData_top_name {
				flex: 1;
				color: $text_color_333;
				z-index: 1;

				.personalData_top_name_top {
					font-size: 32rpx;
					font-weight: bold;
					z-index: 1;
				}

				.personalData_top_name_phone {
					font-size: $font_size_12;
					z-index: 1;
				}
			}

			.personalData_top_shezhi {
				width: 40rpx;
				height: 40rpx;
				z-index: 1;
               padding-right: 20rpx;
			}
			
		}
		// 我的功能
          .user_btn {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx 34rpx;
				.userList {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.mt10 {
					font-size: 24rpx;
				}
			}
		// 我的订单
		.myOrder {
			width: 100%;
			// height: 260rpx;
			border-radius: $border_radius_10;
			background-color: #fff;
			box-shadow:0 10rpx 10rpx 0 rgb(228,228,228);

			.myOrder_top {
				width: 100%;
				height: 80rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				.myOrder_top_left {
					font-size: 32rpx;
					color: $text_color_333;
				}

				.myOrder_top_right {
					font-size: $font_size_14;
					color: $text_color_808080;
					flex:1;
					margin-left: 340rpx;
				}
			}

			.myOrder_btn {
				width: 100%;
				height: 180rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.myOrderList {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: $font_size_12;
					color: $text_color_333;
				}
			}

		}
	}


	.main_myde {
		width: 100%;
		box-sizing: border-box;
		overflow-y: scroll;
		/* #ifndef MP-WEIXIN */
		padding-bottom: 120rpx;
		/* #endif */
		margin-top: 20rpx;
		padding-top: 0;

		// 服务
		.serve {
			width: 100%;
			// height: 250rpx;
			border-radius: $border_radius_10;
			background-color: #fff;
			// box-shadow: 0 10rpx 10rpx 0 rgb(228,228,228);
			padding-bottom:100rpx;
			margin-top: 68px;
			.serve_top {
				width: 100%;
				height: 80rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: start;
				padding: 0 20rpx;
				box-sizing: border-box;

				.serve_top_left {
					font-size: 32rpx;
					color: $text_color_333;
				}
			}

			.serve_btn {
				box-sizing: border-box;
				width: 100%;
				display: grid;
				gap: 50rpx;
				grid-template-columns: repeat(4, 1fr);
				justify-content: center;
				align-items: center;

				.serveList {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: $font_size_12;
					color: $text_color_333;
				}
			}
		}
	}

	.phonePopup {
		width: 85vw;
		height: 760rpx;
		position: relative;

		.phonePopup_top {
			width: 100%;
			height: 240rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.touxiang {
			width: 180rpx;
			height: 180rpx;
			position: absolute;
			left: 50%;
			top: 150rpx;
			transform: translateX(-50%);
		}

		.phonePopup_bom {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $text_color_333;
			padding-top: 120rpx;

			.phonePopup_bom_title {
				font-size: $font_size_14;
				font-weight: bold;
			}

			.phonePopup_bom_phone {
				font-size: $font_size_18;
				font-weight: bold;
				margin-top: 60rpx;
			}
		}
	}

	.invitationCode {
		width: 100%;
		height: calc(100vh - 30vh);
		border-radius: 38rpx 38rpx 0 0;
	}
</style>